/*
 *  Articles.js
 *  created by qinghong
 *  2016-7-11
 */

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Navigator,
    ScrollView,
    WebView
} from 'react-native';
import Moment from 'moment';


import NavBar from '../../Common/NavBar';
import Constants from '../../Common/Constants';
import OneUrls from '../../Common/OneUrls';
import ActivityView from '../../Common/ActivityView';
import ZanView from '../../Common/ZanView';


export default class Article extends Component {

    constructor(props) {
        super(props);
        this.state = {
            articleData: null,
            loaded: false,
            webViewHeight: 100
        };
    }

    componentDidMount() {
        this.fetchData();
    }

    fetchData() {
        let date = new Date();
        let dateStr = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
        let urlStr = OneUrls.ArticlesUrls.articlesData + '?' + 'strDate=' + dateStr + '&strRow=1';
        fetch(urlStr)
            .then((res) => res.json())
            .then((resData) => {
                this.setState({
                    articleData: resData.contentEntity,
                    loaded: true
                });
            })
            .done();
    }

    rightAction = () => {
        alert('弹出分享');
    };

    onNavigationStateChange(navState) {
        //alert(navState.title);
        //console.log(navState);
        this.setState({
            webViewHeight: navState.title - 0
        });
    }

    render() {

        if (!this.state.loaded) {
            return (
                <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
                    <NavBar
                        titleIcon={require('../../images/navLogo.png')}
                        rightIcon={require('../../images/shareBtn.png')}
                        rightAction={this.rightAction}/>
                    <ActivityView text='正在加载文章数据...'/>
                </View>
            );

        } else {

            let dateStr = Moment().format('MMMM DD, YYYY');
            let title = this.state.articleData.strContTitle;
            let author = this.state.articleData.strContAuthor;

            let contentHtml = this.state.articleData.strContent;
            /*let brNum = contentHtml.split('<br>').length;
             let htmlFontSize = 17;
             let htmlLineNum = contentHtml.length * htmlFontSize / (Constants.window.screenWidth - 25);
             let webViewHeight = htmlLineNum * (htmlFontSize + 3) + brNum * htmlFontSize;
             // alert('webViewHeight-'+webViewHeight);
             // 仍存在问题:html字体,颜色透明,webView高度
             */

            let authorIntroduce = this.state.articleData.strContAuthorIntroduce;
            let zanNum = this.state.articleData.strPraiseNumber;


            let jsCode = `
                document.title = document.height;
            `;

            return (
                <View style={{justifyContent: 'center'}}>
                    <NavBar
                        titleIcon={require('../../images/navLogo.png')}
                        rightIcon={require('../../images/shareBtn.png')}
                        rightAction={this.rightAction}/>
                    <ScrollView style={styles.scrollView}>
                        <Text style={{marginLeft: 10, marginTop: 5, fontSize: 12}}>{dateStr}</Text>
                        <Text style={{marginLeft: 10, marginTop: 5, fontSize: 18}}>{title}</Text>
                        <Text style={{marginLeft: 10, marginTop: 5, fontSize: 10}}>{author}</Text>
                        <WebView style={[styles.webView, {height: this.state.webViewHeight}]}
                                 source={{html: contentHtml}}
                                 scrollEnabled={false}
                                 onNavigationStateChange={this.onNavigationStateChange.bind(this)}
                                 injectedJavaScript={jsCode}
                            //onLoadEnd={function(){}}
                            //onLoadStart={function(){}}
                        />
                        <Text style={{marginLeft: 10, marginTop: 5, fontSize: 10}}>{authorIntroduce}</Text>
                        <View style={{height: 50, marginTop: 20, marginBottom: 10,
                                    justifyContent: 'center', alignItems: 'flex-end'}}>
                            <ZanView zanNum={zanNum} style={styles.zanView}/>
                        </View>
                    </ScrollView>
                </View>
            );
        }
    }
}

const styles = StyleSheet.create({
    scrollView: {
        width: Constants.window.screenWidth,
        height: Constants.window.screenHeight - 64 - 49
    },
    webView: {
        width: Constants.window.screenWidth - 10,
        marginTop: 10,
        marginHorizontal: 5
    },
    zanView: {
        height: 36,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        borderColor: 'gray',
        borderRadius: 18,
        borderWidth: 0.5,
        right: -18
    }
});

